<template>
  <div class="suggest-container">
    <el-row :gutter="20">
      <el-col :span="19" :xs="24" :sm="19">
        <div class="majors_wrap">
          <div class="config_box">
            <div class="config_box">
              <div class="top_config">
                <div class="config_search">
                  <input
                    type="text"
                    maxlength="20"
                    placeholder="输入专业名称"
                    v-model="queryParams.name"
                  />
                  <div class="search_btn" @click="getQueryParams">搜索</div>
                </div>
                <div class="config_item">
                  <div class="item_left">专业层次</div>
                  <div class="item_right">
                    <div
                      v-for="item in levelList"
                      :key="item.id"
                      class="right_btn_item"
                      @click="levelListClick(item)"
                    >
                      <span
                        :class="
                          queryParams.level.includes(item.id) ? 'active' : ''
                        "
                      >
                        {{ item.label }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="config_item">
                  <div class="item_left">专业门类</div>
                  <div class="item_right">
                    <div
                      v-for="item in majorList"
                      :key="item.id"
                      class="right_btn_item"
                      @click="majorListClick(item)"
                    >
                      <span
                        :class="
                          queryParams.major.includes(item.id) ? 'active' : ''
                        "
                      >
                        {{ item.label }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="config_item">
                  <!---->
                  <div class="item_right"></div>
                </div>
                <!-- <div class="config_item">
                  <div class="item_left">排序规则</div>
                  <div class="item_right">
                    <div class="right_btn_item">
                      <span class="active"> 默认排序 </span>
                    </div> 
                    <div class="right_btn_item">
                      <span class=""> 人气排序 </span>
                    </div>
                    <div class="right_btn_item">
                      <span class=""> 薪酬排序 </span>
                    </div>
                    <div class="right_btn_item">
                      <span class=""> 男女比例 </span>
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
          <div class="is_majors_warp">
            <div
              class="is_major_item"
              v-for="item in list"
              @click="detail(item)"
            >
              <div class="is_top_item">
                <span class="is_title">{{ item.name }}</span
                ><span class="is_code">专业代码：{{ item.code }}</span>
              </div>
              <div class="is_bottom_item">
                <div class="is_tags_item">{{ item.name }}</div>
                <!-- - 哲学类 -->
                <div class="is_tags_item">修学年限：{{ item.limit_year }}</div>
                <div class="is_tags_item">授予学位：{{ item.degree }}</div>
                <div class="is_tags_item">
                  男女比例：{{ 100 - item.girl_rate }}:{{ item.girl_rate }}
                </div>
                <div class="is_tags_item">
                  平均年薪：{{ item.salary_avg }} (数据来自第三方)
                </div>
              </div>
            </div>
            <pagination
              layout="prev, pager, next"
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="5" :xs="24" :sm="5" v-if="device !== 'mobile'">
        <right-wrap></right-wrap>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { majorList } from "@/api/index";
import rightWrap from "../components/rightWrap.vue";
import { EventBus } from "@/utils/eventBus";
export default {
  name: "",
  components: { rightWrap },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      majorList: [
        { label: "哲学", id: "哲学" },
        { label: "经济学", id: "经济学" },
        { label: "文学", id: "文学" },
        { label: "法学", id: "法学" },
        { label: "历史学", id: "历史学" },
        { label: "教育学", id: "教育学" },
        { label: "理学", id: "理学" },
        { label: "工学", id: "工学" },
        { label: "农学", id: "农学" },
        { label: "医学", id: "医学" },
        { label: "管理学", id: "管理学" },
        { label: "艺术学", id: "艺术学" },
      ],
      levelList: [
        { label: "本科", id: "本科" },
        { label: "专科", id: "专科" },
      ],
      queryForm: {
        major: [],
      },
      queryParams: {
        page: 1,
        pageSize: 20,
        major: [],
        level: [],
        name: "",
      },
      list: [],
      total: 0,
    };
  },
  created() {
    EventBus.$on("majorsEvent", (data) => {
      this.queryParams.name = data;
      this.getQueryParams();
    });
    this.getQueryParams();
  },
  methods: {
    detail(row) {
      this.$router.push({
        path: "/majorsDetail",
        query: { id: row.id },
      });
    },
    getList(queryParams) {
      majorList(queryParams).then((response) => {
        this.list = response.data.data;
        this.total = response.data.total;
      });
    },
    getQueryParams() {
      this.queryParams.page = 1;
      var queryParams = JSON.parse(JSON.stringify(this.queryParams));
      console.log("queryParams", queryParams);
      queryParams.major = queryParams.major.join(",");
      queryParams.level = queryParams.level.join(",");
      this.getList(queryParams);
    },
    majorListClick(row) {
      this.queryParams.page = 1;
      this.queryParams.major = this.toggleValueInArray(
        this.queryParams.major,
        row.id
      );
      this.getQueryParams();
    },
    levelListClick(row) {
      this.queryParams.page = 1;
      this.queryParams.level = this.toggleValueInArray(
        this.queryParams.level,
        row.id
      );
      this.getQueryParams();
    },
  },
};
</script>

<style scoped lang="scss">
.suggest-container {
  padding: 20px 0;
  height: 100%;
}
.majors_wrap .config_box {
  margin-bottom: 20px;
}

.majors_wrap .is_majors_warp {
  width: 100%;
  padding: 20px 0;
  border-radius: 8px;
  color: #222224;
  background-color: #fff;
}

.majors_wrap .is_majors_warp .is_paging {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-bottom: 10px;
}

.majors_wrap .is_majors_warp .is_major_item {
  padding: 15px;
  cursor: pointer;
}

.majors_wrap .is_majors_warp .is_major_item .is_top_item .is_title {
  font-size: 20px;
}

.majors_wrap .is_majors_warp .is_major_item .is_top_item .is_code {
  font-size: 12px;
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid #ccc;
  border-radius: 12px;
  margin-left: 10px;
}

.majors_wrap .is_majors_warp .is_major_item .is_bottom_item {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.majors_wrap .is_majors_warp .is_major_item .is_bottom_item .is_tags_item {
  margin-top: 10px;
  padding: 3px 5px;
  background-color: #f5f6f7;
  border-radius: 5px;
  color: #826e82;
  margin-right: 10px;
}

.majors_wrap .is_majors_warp .is_major_item:hover .is_top_item .is_title {
  color: #0478f1;
}
.majors_wrap .config_box {
  margin-bottom: 20px;
}

.config_box {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
}
.top_config,
.config_box .top_selected {
  padding: 16px 14px;
}

.config_box .top_config .config_search,
.config_box .top_selected .config_search {
  width: 360px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #efefef;
  background: #f9fafa;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}

.config_box .top_config .config_search input[type="text"],
.config_box .top_selected .config_search input[type="text"] {
  padding-left: 10px;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}

.config_box .top_config .config_search .search_btn,
.config_box .top_selected .config_search .search_btn {
  width: 80px;
  height: 37px;
  background-color: #0478f1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.56px;
  text-align: center;
  line-height: 37px;
  cursor: pointer;
}

.config_box .top_config .top_config,
.config_box .top_selected .top_config {
  border-bottom: 2px solid #eff0f0;
}

.config_box .top_config .config_year,
.config_box .top_selected .config_year {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.config_box .top_config .config_year .is_choose_year,
.config_box .top_selected .config_year .is_choose_year {
  width: 100px;
  height: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.config_box .top_config .config_item,
.config_box .top_selected .config_item {
  display: flex;
  justify-content: flex-start;
}

.config_box .top_config .config_item .item_left,
.config_box .top_selected .config_item .item_left {
  width: 58px;
  color: #9ca1a6;
  margin-right: 12px;
}

.config_box .top_config .config_item .item_right,
.config_box .top_selected .config_item .item_right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.config_box .top_config .config_item .item_right .item_btn,
.config_box .top_selected .config_item .item_right .item_btn {
  color: #0478f1;
  font-weight: 600;
  font-size: 14px;
  margin: 10px 20px 0 8px;
  cursor: pointer;
}

.config_box .top_config .config_item .item_right .right_btn_item,
.config_box .top_selected .config_item .item_right .right_btn_item {
  color: #606166;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.config_box .top_config .config_item .item_right .right_btn_item span,
.config_box .top_selected .config_item .item_right .right_btn_item span {
  padding: 2px 8px;
}

.config_box .top_config .config_item .item_right .right_btn_item .active,
.config_box .top_selected .config_item .item_right .right_btn_item .active {
  background-color: rgba(201, 225, 251, 0.5);
  color: #0478f1;
}
</style>
